/
<template>
  <div class="classify" v-if="list[activeKey]">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        @click="tab(index)"
      />
    </van-sidebar>
    <div class="content">
      <dl
        v-for="(item, index) in list[activeKey].children"
        :key="index"
      >
        <dt>
          <img v-lazy="item.img" />
        </dt>
        <dd>{{ item.title }}</dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      activeKey: 0,
    };
  },
  mounted() {
    this.$axios.get("/list").then((res) => {
      this.list = res.data;
    });

  },
};
</script>

<style lang="scss">
.classify {
  width: 100%;
  height: 100%;
  display: flex;
  > :nth-child(1) {
    width: 80px;
    height: 100%;
  }
  .content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
